<!--
 * 大区自营商品管理
-->
<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="商品名称">
        <br /><br />
        <el-input style="margin-left:-80px;width:200px" v-model="formInline.goodsName" @keyup.enter.native="search()"
          clearable></el-input>
      </el-form-item>
      <el-form-item label="商品编码" style="margin-left:15px">
        <br /><br />
        <el-input style="margin-left:-80px;width:200px" v-model="formInline.goodsSeq" @keyup.enter.native="search()"
          clearable></el-input>
      </el-form-item>
      <el-form-item label="计量单位" style="margin-left:15px">
        <br /><br />
        <el-input style="margin-left:-80px;width:200px" v-model="formInline.unit" @keyup.enter.native="search()"
          clearable></el-input>
      </el-form-item>
      <el-form-item label="商品状态" style="margin-left:15px">
        <br /><br />
        <el-select v-model="formInline.putaway" clearable style="margin-left:-80px;width:200px">
          <el-option label="上架" :value="1"></el-option>
          <el-option label="下架" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" style="margin-left:15px">
        <br /><br />
        <el-select v-model="formInline.auditState" clearable style="margin-left:-80px;width:200px">
          <el-option v-for="(value, name, index) in auditEnmu" :key="index" :label="value" :value="name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否限购" style="margin-left:15px">
        <br /><br />
        <el-select v-model="formInline.isBuyLimit" clearable style="margin-left:-80px;width:200px">
          <el-option label="限购" :value="1"></el-option>
          <el-option label="不限购" :value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="margin-left:950px;text-align:right;">
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
        <el-button type="primary" @click="addNew()" size="mini" icon="el-icon-edit">新增</el-button>
        <el-button type="success" @click="exportExcel()" size="mini" icon="el-icon-s-data"
          :loading="exportLoading">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" width="100%" height="500px" :data="tableData"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }" border>
      <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
      <el-table-column label="商品编号" prop="goodsSeq" align="center"></el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.picture.picUrl" v-if="scope.row.picture != '' && scope.row.picture != null" width="70"
            @click="$seeImage" height="50" style="object-fit: cover;" />
          <span v-else>无图片</span>
        </template>
      </el-table-column>
      <el-table-column label="计量单位" prop="unitName" align="center"></el-table-column>
      <el-table-column label="售卖数量" prop="salesQuantity" align="center"></el-table-column>
      <el-table-column prop="salePrice" label="建议零售价" align="right" :formatter="fixData"></el-table-column>
      <el-table-column label="会员价（元）" prop="memberPrice" align="center"></el-table-column>
      <el-table-column label="库存数量" align="center">
        <template slot-scope="scope">
          {{ scope.row.repertorys == -1 ? '不限制' : scope.row.repertorys }}
        </template>
      </el-table-column>
      <el-table-column label="是否限购" align="center">
        <template slot-scope="scope">
          {{ scope.row.isBuyLimit === 1 ? '限购' : '不限购' }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="已兑数量" prop="conversionQuantity" align="center"></el-table-column>
      <el-table-column label="酒币兑换比列(%)" prop="scale" width="160" align="center"></el-table-column> -->
      <!-- <el-table-column label="限购数量" prop="amount" align="center"></el-table-column> -->
      <el-table-column label="售卖状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.putaway" :active-value="1" :inactive-value="0"
            @change="updateGoodsStatus(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          {{ auditEnmu[scope.row.auditState] ? auditEnmu[scope.row.auditState] : '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="最近更新时间" prop="updateTime" width="200" align="center"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button v-if="scope.row.putaway === 0 || scope.row.auditState == -1" size="mini" @click="addNew(scope.row)" type="text">编辑</el-button>
          <!-- <el-button size="mini" @click="del(scope.row)" type="text">删除</el-button> -->
          <el-button size="mini" @click="look(scope.row)" type="text">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:2px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  queryGoodsInfoListAutotrophy,
  updateGoodsInfoNoAutotrophy,
  queryGoodsInfoListAutotrophyExcel
} from '@/api/proprietaryGoods';
import {
  getProductList,
} from "@/api/product";
export default {
  data() {
    return {
      formInline: {
        goodsName: '',
        goodsSeq: '',
        unit: '',
        putaway: '',
        auditState: '',
        isBuyLimit: '',
        isAutotrophy: 1,
        orgSeq: '',
      },
      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 10,
      },
      total: 0,
      exportLoading: false,

      auditEnmu: {
        '-1': '已下架',
        0: '待审核',
        1: '审核通过',
        2: '审核不通过',
      }
    };
  },
  created() {
    const loginInfo = localStorage.getItem('logininfo');
    const orgSeq = JSON.parse(loginInfo).orgSeq || JSON.parse(loginInfo).orgList[0].orgSeq;
    this.formInline.orgSeq = orgSeq;

    this.getList();
  },
  methods: {
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        return cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    getList() {
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
          isSelfSupport: 1,
        },
        ascs: [],
        descs: [],
      };
      this.loading = true;
      queryGoodsInfoListAutotrophy(data).then((res) => {
        if(res.code == 1) {
          this.tableData = res.records.map((item) => {
            item.tagTypes = item.tagType ? item.tagType.split(",") : [];
            return item;
          });
          this.total = res.total;
        } else {
          this.$message.error(res.message);
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    updateGoodsStatus(curItem) {
      curItem.putaway = curItem.putaway == 1 ? 0 : 1;
      this.$confirm(
        `确定${curItem.putaway == 1 ? '下架' : '上架'}该商品吗?`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        updateGoodsInfoNoAutotrophy({
          goodsId: curItem.goodsId,
        }).then((res) => {
          this.$message.success(res.message);
          this.getList();
        });
      });
    },
    del(curItem) {
      this.$confirm('确定删除该商品吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deExchangeStatus({
          id: curItem.uuid,
        }).then((res) => {
          this.$message.success(res.message);
          this.getList();
        });
      })
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },
    addNew(curItem) {
      const pathObj = {
        name: 'proprietaryGoodsEdit',
        params: {}
      }
      if (curItem && curItem.goodsId) {
        pathObj.params = {
          goodsId: curItem.goodsId,
        }
      }
      this.$router.push({
        ...pathObj,
      })
    },
    look(curItem) {
      this.$router.push({
        name: 'proprietaryGoodsDetail',
        params: {
          goodsId: curItem.goodsId,
          // types: 0,
          edit: true
        }
      })
    },
    exportExcel() {
      this.exportLoading = true;
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
          isSelfSupport: 1
          // types: 0,
        },
        ascs: [],
        descs: [],
      }
      queryGoodsInfoListAutotrophyExcel(data).then((res) => {
        const link = document.createElement('a');
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        link.style.display = 'none';
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = '自营商品列表.xlsx';
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      }).finally(() => {
        this.exportLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-form-inline {
  /deep/ .el-form-item__content {
    line-height: normal;
  }
}
</style>